<template>
  <div class="allRemark">
    <transition name="fadeIn">
      <msg :msgWay="msgWay" :text="text" v-if="showMsg"></msg>
    </transition>
    <div class="addContent">
      <p>
        来评论一下吧
        <span class="LoginTip" v-if="!isLogin" @click="GoLogin">请登录</span>
      </p>
      <textarea
      id="remarkTextarea"
        :disabled="!isLogin"
        :class="{addBorder:isBorder}"
        placeholder="欢迎交流..."
        @focus="addBorder"
        @blur="delBorder"
        v-model="newRemark"
      ></textarea>
      <div class="submitBox">
        <button class="submitRemark" @click="addRemark">添加</button>
      </div>
    </div>
    <div v-if="ifContent">
      <remark-item
        @restartSearch="restartSearch"
        v-for="item in remarkContent"
        :key="item.id"
        :content="item.content"
        :goodNum="item.goodNum"
        :time="parseInt(item.time)"
        :username="item.realname"
        :id="item.id"
        :CurrImg="item.avatar"
        @delRemark="delRemark"
      ></remark-item>
    </div>
    <div class="noremark" v-if="!ifContent">没有评论</div>
  </div>
</template>

<script>
import msg from "../../components/msg";
import remarkItem from "./remarkItem";
import Bus from "../../bus";
import {state} from "../../store.js"
export default {
  components: {
    remarkItem,
    msg,
  },
  data() {
    return {
      showMsg: false,
      msgWay: "error",
      text: "添加成功",
      remarkContent: [],
      ifContent: true,
      isBorder: false,
      newRemark: "",
      flag:true
    };
  },
  computed: {
    isLogin(){
      return state.isLogin
    }
  },
  created() {
    this.getAllRemark();
    Bus.$on("finishChange",msg=>{
    if(msg==="success"){
      this.getAllRemark()

    }      
    })
  },
  methods: {
    delRemark(status) {
      this.showMsg = true;
      this.msgWay = status;
      setTimeout(() => {
        this.showMsg = false;
      }, 2000);
      status == "success" ? (this.text = "删除成功") : (this.text = "删除失败");
      this.getAllRemark();
    },
    GoLogin() {
      this.$router.push("/login");
    },
    addBorder() {
      this.isBorder = true;
    },
    delBorder() {
      this.isBorder = false;
    },
    //获取全部评论
    getAllRemark() {
      this.$axios
        .get("/comment/search", {
          params: {
            blogId: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.ifContent = true;
            this.remarkContent = res.data.data;
          } else if (res.data.error === 0) {
            this.ifContent = false;
          }
        });
    },
    restartSearch(data) {
      if (data === false) {
        this.ifContent = false;
      } else {
        this.ifContent = true;
        this.remarkContent = data;
      }
    },

    addRemark() {
      if(this.flag){
        this.flag=false
        if (this.newRemark !== "") {        
        this.$axios
          .post("/comment/add", {
            username: this.$store.getters.user.username,
            content: this.newRemark,
            blogId: this.$route.params.id,
            realname: this.$store.getters.user.realname,
            avatar: this.$store.getters.user.avatar
          })
          .then((res) => {
            console.log(res);
            if (res.data.error === -1) {
              this.msgWay = "success";
              setTimeout(() => {
                this.showMsg = false;
              }, 2000);
              setTimeout(()=>{
                this.flag=true
              },200)
              this.text = "添加成功";
              this.showMsg = true;
              this.newRemark = "";
              this.getAllRemark();
            } else {
              this.msgWay = "error";
              setTimeout(() => {
                this.showMsg = false;
              }, 2000);
              this.showMsg = true;
              this.newRemark = "";
              this.text = "添加失败";
              setTimeout(()=>{
                this.flag=true
              },200)
            }
          });
      } else {
        this.msgWay = "warn";
        setTimeout(() => {
          this.showMsg = false;
        }, 2000);
        setTimeout(()=>{
                this.flag=true
              },200)
        this.showMsg = true;
        this.newRemark = "";
        this.text = "请填写内容";
      }
      }
    },
  },
  beforeDestroy() {
    Bus.$off("finishChange")
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/pc/remark.less");
@import url("../../css/mobile/mvremark.less");

.noremark{
  margin-left: 15px;
}

</style>